<template>
  <view>
      <u-table width="100%" border-color="#214423" bg-color="#214423" :th-style="{color:'#FF0080',}" color="#fff">
        <u-tr>
          <u-th width="30%" nowrap="nowrap">装备</u-th>
          <u-th nowrap="nowrap">RFID</u-th>
          <u-th nowrap="nowrap">操作</u-th>
        </u-tr>
        <u-tr v-for="(item,index) of lists" :key="index">
          <u-td><text :class="item.status==true?'danger':''">{{item.wuping_name}}</text></u-td>
          <u-td><text :class="item.status==true?'danger':''">{{item.rfid}}</text></u-td>
          <u-td>
            <view class="btnx" @click="del(item.id)">删除</view>
          </u-td>
        </u-tr>
      </u-table>
    <view class="wrap" style="margin-top: 10px">
      <u-row gutter="8">
        <u-button type="success" size="medium" @click="confirm" v-if="this.lists.length >0">确定</u-button>
      </u-row>
    </view>
    <u-popup v-model="show" mode="center">
      <view style="
          color: white;
          background-color: #09690f;
          width: 100%;
          height: 100%;
          padding: 40rpx;
        ">
        <u-form :model="form" ref="uForm">
          <u-form-item label="申请人" prop="escort" :border-bottom="false">
            <u-input v-model="form.escort" type="select" @click="showEscort = true" />
            <u-select v-model="showEscort" mode="single-column" :list="escortList" @confirm="confirmEscort"></u-select>
          </u-form-item>
        </u-form>
        <u-button @click="submit">确定</u-button>
      </view>
    </u-popup>
    <u-modal v-model="tipshow" :content="content" :mask-close-able="true" :show-cancel-button="true" @confirm=confirms(delid)></u-modal>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import sqlLite from '../../common/sqllite-utils.js';
  export default {
    data() {
      return {
       dialogSign: 0,
       lists: [],
       escortList: [],
       rfidList: [],
       showEscort: false,
       show: false,
       escortId: '',
       form: {
         escort: '',
         intro: ''
       },
       timer:'',
       delid:'',
       rules: {
         escort: [{
           required: true,
           message: '选择陪同人',
           // 可以单个或者同时写两个触发验证方式
           trigger: 'blur,change'
         }],
         intro: [{
           min: 5,
           message: '简介不能少于5个字',
           trigger: 'change'
         }]
       },
       content:'您确定删除吗？',
       tipshow:false,
       rfidlist:[]
      }
    },
    onLoad() {
      const tableName = 'inoutTheLibraryTable';
      sqlLite.selectFromTable(
               	`select * from ${tableName}`,
      ).then((res) => {
        console.log(res)
        if(res.length > 0) {
          this.lists = res
        }else {
          this.dialogSign = 1
        }
      });
      
      sqlLite.selectFromTable(
        `select * from 'accompanyingPersonTable'`,
      ).then(res => {
        res.forEach((v, k) => {
              this.escortList.push({
                value: v.ID,
                label: v.nickName
              })
            })
      })
      
      
    },
    methods: {
      /**
       * 删除
       */
      del(e) {
        this.tipshow = true
        this.delid = e
      },
      /**
       * 确认数目后点击
       */
      confirm() {
        if (this.dialogSign == 0) {
          this.show = true
          this.$nextTick(function() {
            this.$refs.uForm.setRules(this.rules);
          })
        } else {
          uni.showToast({
            title: '暂无数据！',
            icon: 'error'
          })
        }
      },
      
      confirmEscort(e) {
        this.form.escort = e[0].label
        uni.setStorage({
          key: "accompanyingPerson",
          data: e[0].value,
        });
      },
      
      submit() {
        this.lists.forEach(item => {
          this.rfidlist.push(item.rfid)
        })
        console.log(this.rfidlist)
        uni.setStorage({
          key: "rfidlistarr",
          data: this.rfidlist,
        });
        this.show = false
      },
      
      confirms(e) {
        console.log(e,'-----')
        sqlLite.executeSqlCode(
                 	'DELETE FROM inoutTheLibraryTable where id=' + e,
        ).then((res) => {
          this.$refs.uToast.show({
            title: '删除数据成功！',
            type: 'success',
          });
          sqlLite.selectFromTable(
                     	`select * from 'inoutTheLibraryTable'`,
          ).then(res => {
            this.lists = res
          })
        }).catch(err => {
          console.log(err,'删除失败!')
        })
      }
    }
  }
</script>

<style>

</style>
